import React, { useEffect, useState } from 'react'
import { NavBar, Space, Tabs } from 'antd-mobile'
import { Popup, Button } from 'antd-mobile'
import axios from '../../axios/api'
// import memo from 'react-memo'
function Home() {

    const [data, setData] = useState([])
    const [visible1, setVisible1] = useState(false)

    const [isSpeed, setIsSpeed] = useState(false)
    const [isSeat, setIsSeat] = useState(false)
    const [isDesc, setIsDesc] = useState(false)
    const getData = async () => {
        const res = await axios.post('/api/trip/train', {
            "start": "北京",
            "end": "广州",
            "date": "string",
            "isSpeed": isSpeed,
            "isSeat": isSeat,
            "isDesc": isDesc,
            "page": 1
        })
        console.log(res);


        if (res.data.code == 200) {
            setData(res.data.data)
        }

    }

    useEffect(() => {
        getData()
    }, [isSpeed, isSeat, isDesc])

    const sx = () => {
        setVisible1(true)
    }

    return (
        <div>

            <NavBar onBack={() => { -1 }}>北京—广州</NavBar>

            <Tabs>
                <Tabs.Tab title='火车' key='fruits'>
                    <div>
                        {
                            data.map((item, index) => (
                                <div
                                    key={index}
                                    style={{ padding: '10px 0' }}
                                >
                                    <div style={{ display: 'flex', justifyContent: 'space-around', border: '1px solid #ccc', padding: '10px' }}>
                                        <div>
                                            <p>11:22</p>
                                            <p>{item.start}</p>

                                        </div>
                                        <div>
                                            <p>10:20</p>
                                            <p>{item.isSeat ? '高铁' : '动车'}</p>
                                        </div>
                                        <div>
                                            <p>10:20</p>
                                            <p>{item.end}</p>
                                        </div>
                                        <div>
                                            <p>￥345</p>
                                            <p>{item.isSpeed ? '有票' : '无票'}</p>
                                        </div>
                                    </div>
                                </div>
                            ))
                        }

                        <div style={{ backgroundColor: "#fff", margin: '20px', position: 'fixed', bottom: '0' }}>
                            <span style={{ marginLeft: '10px' }}>出发 早晚</span>
                            <span style={{ marginLeft: '10px' }}>耗时 长短</span>
                            <span style={{ marginLeft: '10px' }}>价格 低-高</span>
                            <span onClick={sx} style={{ marginLeft: '10px' }}>高级筛选</span>
                        </div>

                        <Popup
                            visible={visible1}
                            onMaskClick={() => {
                                setVisible1(false)
                            }}
                            onClose={() => {
                                setVisible1(false)
                            }}
                            bodyStyle={{ height: '70vh' }}
                        >
                            <h2 style={{ textAlign: 'center' }}>高级筛选</h2>

                            <div>
                                <button onClick={() => {
                                    setIsSpeed(!isSpeed)
                                    setVisible1(false)
                                }}>只看有票</button>
                            </div>

                            <div style={{ marginTop: '20px' }}>

                                <button onClick={() => {
                                    setIsDesc(!isDesc)
                                    setVisible1(false)
                                }} style={{ margin: '10px' }}>0:00-6:00</button>
                                <button style={{ margin: '10px' }}>6:00-12:00</button>
                                <button style={{ margin: '10px' }}>12:00-18:00</button>
                                <button style={{ margin: '10px' }}>18:00-24:00</button>
                            </div>

                            <div style={{ marginTop: '20px' }}>

                                <button onClick={() => {
                                    setIsSeat(!isSeat)
                                    setVisible1(false)
                                }} style={{ margin: '10px' }}>高铁 G/C</button>
                                <button style={{ margin: '10px' }}>动车D</button>
                                <button style={{ margin: '10px' }}>普通 K/</button>
                                <button style={{ margin: '10px' }}>其他L/Y</button>
                            </div>

                            <div style={{ marginTop: '20px' }}>

                                <button style={{ margin: '10px' }}>上海</button>
                                <button style={{ margin: '10px' }}>上海虹桥</button>
                            </div>

                        </Popup>

                    </div>
                </Tabs.Tab>
                <Tabs.Tab title='中转' key='vegetables'>
                    西红柿
                </Tabs.Tab>
            </Tabs>
        </div>
    )
}

export default Home